import React, { FC, useEffect, useState } from 'react'
import ChartLine from '@/components/pages/chartLine'
import ChartPie from '@/components/pages/chartPie'
import SaleOne from '@/components/pages/saleOne'
import SaleTow from '@/components/pages/saleTow'
import styled from "styled-components"
import { useStores } from '@/store'
import { PageDateSelect } from '@/types/pages/enum'
import { FnCallBack } from '@/types/header/types'
import { IFinanceConsts, IFinanceFull } from '@/types/pages/finance/interface'
import { inject, observer } from "mobx-react"; 
import frame_url from '@/assert/images/bg_big.png'
import income_url from '@/assert/images/finance/income.png'
import profit_url from '@/assert/images/finance/profit.png'
import bg_verticle_url from '@/assert/images/bg_verticle.png'
import imgone_url from '@/assert/images/img1.png'
import imgone_small_url from '@/assert/images/img11.png'
import imgtwo_url from '@/assert/images/img2.png'
import imgtwo_small_url from '@/assert/images/img22.png'
const ContentFrame = styled.div`
    width: 100%;
    position: absolute;
    top: 8.3rem;
    bottom: 0px;
    left: 0px;
    display: flex;
    flex-direction: row;
    .left{
      flex:1 1 48%;
      display: flex;
      flex-direction:column; 
      .finance{
        flex:1 1 60%;
        display: flex;
        flex-direction: row; 
        .finance-left{
          flex:1;
          display: flex;
          flex-direction: column; 
          background-image: url(${bg_verticle_url}); 
           background-size: 100% 100%;
          .finance-count{
            flex:1 1 60%
          }
          .finance-money{
            flex:1 1 40%
          }
        }
        .finance-right{
          flex:1;
        } 
      } 
      .income-chart{
        flex:1 1 40%;
      } 
    }
    .right{
      flex:1 1 52%;
      display: flex;
      flex-direction: column; 
      .finance{
        flex:1 1 60%;
        display: flex;
        flex-direction: row; 
        .finance-left{
          flex:1;
          display: flex;
          flex-direction: column; 
          background-image: url(${bg_verticle_url}); 
           background-size: 100% 100%;
          .finance-count{
            flex:1 1 60%
          }
          .finance-money{
            flex:1 1 40%
          }
        }
        .finance-right{
          flex:1;
        }
    
      }
   
      .income-chart{
        flex:1 1 40%;
      }
    }
`

const Content: FC<{}> = function () {
  const store = useStores();
  const { profit, incomeData, incomeTypePie,
    profitData, profitTypePie, incomeLine, profitLine,
    income } = store.financeCosts.screenData;
  const fnCallBack: FnCallBack = (data: Partial<IFinanceConsts>) => {
    store.header.srtScreenData(data); 
    store.header.setHeaderName('成本费用分析');
    document.title = '成本费用分析';
  };
  useEffect(() => {
    store.finance.getScreenData(PageDateSelect.year);
    store.header.initHeaderControl(PageDateSelect.year, async (type, fnCallBack, date) => {
      const data = await store.financeCosts.getScreenData(type, date)
      fnCallBack<Partial<IFinanceConsts>>(data);
    }, fnCallBack)
    // 模拟按钮点击
    store.header.headerControl.changeButton!(PageDateSelect.year, fnCallBack);

  }, [])

  return (
    <ContentFrame>
      <div className='left'>
        <div className='finance'>
          <div className='finance-left'>
            <div className='finance-count'>
              <SaleOne 
                title="主营成本"
                image={imgone_url}
                {...income}/>
            </div>
            <div className='finance-money'>
              <SaleTow 
                image={imgone_small_url}
               {...incomeData}  />
              </div>
          </div>
          <div className='finance-right'>
            <ChartPie style={{backgroundImage:frame_url}}  title={incomeTypePie.title!} dataset={incomeTypePie.dataset} />
          </div>

        </div>
        <div className='income-chart'>
          <ChartLine style={{backgroundImage:frame_url}} title={incomeLine.title!} dataset={incomeLine.dataset!} />
        </div>
      </div>
      <div className='right'>
      <div className='finance'>
          <div className='finance-left'>
            <div className='finance-count'>
              <SaleOne name={profit.name}
               title="非产生费用"
                unit={profit.unit}
                totalNum={profit.totalNum}
                image={imgtwo_url}
                num={profit.num}
                saleRate={profit.saleRate}
                comparisonText={profit.comparisonText} upDownStatus={profit.upDownStatus} />
            </div>
            <div className='finance-money'>
              <SaleTow      
                 image={imgtwo_small_url}
                {...profitData}  /></div>
          </div>
          <div className='finance-right'>
            <ChartPie style={{backgroundImage:frame_url}} title={profitTypePie.title!} dataset={profitTypePie.dataset} />
          </div>

        </div>
        <div className='income-chart'>
          <ChartLine style={{backgroundImage:frame_url}} title={profitLine.title!} dataset={profitLine.dataset!} />
        </div>
      </div>

    </ContentFrame>
  )
}

export default observer(Content) 
